
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css3悬停突起</title>
</head>
<style>
* {
  margin: 0;
  padding: 0;
}

body{
    background-color:aquamarine;
}

ul {
  width: 880px;
  padding: 0 30px;
  margin: 150px auto;
}
/* 第二步：开始写CSS */
/* 首先，写好每一个li的样式 */
ul li {
  float: left;
  width: 180px;
  padding: 19px;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(223,231,239, .7);
  color: rgb(32,40,48);
  text-shadow: 0 1px 1px rgb(255,255,255);
  font-size: 14px;
  /* 给所有属性都设置动画 */
  transition: all .2s ease;
}
/* 写好标题样式 */
ul li h4 {
  height: 40px;
  margin-bottom: 15px;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid rgba(223,231,239, .7);
}
/* 写好内容样式 */
ul li p {
  text-align: left;
  height: 230px;
  overflow: hidden;
  font-size: 14px;
  line-height: 24px;
}
/* 然后，写鼠标悬停到li的效果 */
ul li:hover{
    /* 悬停放大1.1倍 */
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    /* 悬停设置圆角 */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* 悬停设置阴影 */
    -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.5);
    -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.5);
    box-shadow: 0 -1px 10px rgba(0,0,0,.5);
}
</style>
<body>
<!-- 第一步：先写好html布局，一个标题一个内容 -->
<ul class="clearfix">
    <li>
        <h4>什么是前端</h4>
        <p>前端即网站前台部分，运行在PC端
            移动端等浏览器上展现给用户浏览的网页。
            随着互联网技术的发展，HTML5，CSS3，
            前端框架的应用，跨平台响应式网页设计
            能够适应各种屏幕分辨率，合适的动效设计，
            给用户带来极高的用户体验。</p>
    </li>
    <li>
        <h4>什么是PHP</h4>
        <p>php通常指超文本预处理器，用于面向对象、
            命令式编程，是一种通用开源脚本语言。
            其主要特点为开源性和免费性、快捷性、
            数据库连接的广泛性、面向过程和面向对象并用。
            优点是利于学习，使用广泛。</p>
    </li>
    <li>
        <h4>什么是Golang</h4>
        <p>golang又称go语言是一种静态强类型、编译型
            语言，是一个开源编程环境，可以轻松构建简单、
            可靠和高效的软件。 Go 语言语法与 C 相近，
            但功能上有：内存安全，GC，结构形态及 
            CSP-style 并发计算。.
            </p>
    </li>
    <li>
        <h4>什么是Vue</h4>
        <p>Vue是一套用于构建用户界面的渐进式JavaScript
            框架vue就是一个js库,并且无依赖别的js库,直
            接引入一个js文件就可以使用,与传统JS和JQuery
            框架不同,Vue的渐进式框架表示开发者可以由简
            单组件写起,渐渐搭建出一个复杂的前端平台。</p>
    </li>
</ul>
</body>
</html>